<template>
	<view :class="['purchase-info',{pd0: (orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.pay_status==0 && orderInfo.status_name!=='已取消') || (orderInfo.store_id==store_id && orderInfo.type==2 && orderInfo.pay_status==2 && orderInfo.shipping_status==1 && orderInfo.order_status==0) || (orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.waite_status==1 && orderInfo.pay_status==2 && orderInfo.type==1) || (orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0)}]">
		<view class="purchase-info-1" v-if="orderInfo.order_status==0&&orderInfo.shipping_status==0&&orderInfo.pay_status==0">
			<view>
				<view class="purchase-info-1-tit">待支付</view>
				<view class="purchase-info-1-text">支付后商家立即发货</view>
			</view>
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_pay.png" mode="widthFix"></image>
		</view>
		<view class="purchase-info-1" v-if="orderInfo.order_status==0&&orderInfo.shipping_status==0&&orderInfo.pay_status==2">
			<view>
				<view class="purchase-info-1-tit">待发货</view>
				<view class="purchase-info-1-text">等待发货</view>
			</view>
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_boxs.png" mode="widthFix"></image>
		</view>
		<view class="purchase-info-1" v-if="orderInfo.order_status==0&&orderInfo.shipping_status==1&&orderInfo.pay_status==2">
			<view>
				<view class="purchase-info-1-tit">商家已发货</view>
				<view class="purchase-info-1-text">等待确认收货</view>
			</view>
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_trcuk.png" mode="widthFix"></image>
		</view>
		<view class="purchase-info-1" v-if="orderInfo.order_status==1&&orderInfo.shipping_status==2&&orderInfo.pay_status==2">
			<view>
				<view class="purchase-info-1-tit">交易已完成</view>
			</view>
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_done.png" mode="widthFix"></image>
		</view>
		<view class="purchase-info-1" v-if="orderInfo.order_status==2">
			<view>
				<view class="purchase-info-1-tit">交易已取消</view>
			</view>
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_cancle.png" mode="widthFix"></image>
		</view>
		<view class="purchase-info-3">
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_addr@2x.png"></image>
			<view class="purchase-info-3-box">
				<view class="purchase-info-3-tit"><text>收货人：{{orderInfo.address_id.consignee}}</text><text>{{orderInfo.address_id.mobile}}</text></view>
				<view class="purchase-info-3-text">
					收货地址：
					<block v-if="orderInfo.address_id.province">{{orderInfo.address_id.province}}</block>
					<block v-if="orderInfo.address_id.city">{{orderInfo.address_id.city}}</block>
					<block v-if="orderInfo.address_id.district">{{orderInfo.address_id.district}}</block>
					{{orderInfo.address_id.address}}
				</view>
			</view>
		</view>
		<view class="purchase-info-4">
			<view class="chooseAll" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0">
				<checkbox-group @change="isAll">
					<label><checkbox value="all" :checked="allchose" color="#FFFFFF" />全选</label>
				</checkbox-group>
			</view>
			<checkbox-group @change="isSingleAll">
				<view class="purchase-info-4-pro" v-for="(data,index) in orderInfo.goods_list" :key="index">
					<label>
						<!-- #ifdef MP-WEIXIN -->
						<checkbox :value="data.goods_id" :checked="data.checked" color="#FFFFFF" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0" />
						<!-- #endif -->
						<!-- #ifdef H5 || APP-PLUS -->
						<checkbox :value="data.goods_id.toString()" :checked="data.checked" color="#FFFFFF" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0"/>
						<!-- #endif -->
						<block v-if="data.have_group!=1">
							<image :src="data.sku_info.img"></image>
							<view class="purchase-info-4-info">
								<view>{{data.goods_name}}</view>
								<text>
									<text v-if="data.sku_info.size">{{data.sku_info.size}}</text>
									<text v-if="data.sku_info.color">{{data.sku_info.color}}</text>
									<text v-if="data.sku_info.lining">{{data.sku_info.lining}}</text>
								</text>
							</view>
							<view class="purchase-info-4-pro-num">x{{data.goods_number}}</view>
						</block>
						<block v-else>
							<image :src="data.image_thumb"></image>
							<view class="purchase-info-4-info">
								<view class="package">{{data.goods_name}}</view>
							</view>
							<view class="purchase-info-4-pro-num">x{{data.goods_number}}</view>
						</block>
					</label>
				</view>
			</checkbox-group>
			<!-- <view class="purchase-info-4-coupon" v-if="!orderInfo.coupon_id && orderInfo.user_list.role_type==2 && orderInfo.order_status==0 && orderInfo.shipping_status==0 && orderInfo.pay_status==0" @click="selectCoupon">
				<view>平台优惠</view>
				<view class="coupon-info" v-if="!coupon_list_id">{{couponList.length}}张优惠券</view>
				<view class="coupon-info" v-else>{{coupon_name}}</view>
			</view> -->
			<view class="purchase-info-4-cell">
				<view>
					<text>物流订单号</text>
					<text>
						{{orderInfo.express_sn?orderInfo.express_sn:'未填写物流单号'}}
					</text>
				</view>
				<view v-if="orderInfo.express_img.length">
					<text>物流单图片</text>
					<text class="lookPic" @click="lookPic">查看物流单图片</text>
				</view>
				<view v-if="orderInfo.store_list.store_type==1">
					<text>物流费用</text>
					<text>{{ orderInfo.express_money }}</text>
				</view>
				<view v-if="orderInfo.store_list.store_type==1">
					<text>物流说明</text>
					<text>{{ orderInfo.express_brief || '-' }}</text>
				</view>
			</view>
			<view class="purchase-info-4-cell-1">
				<view><view>订单总价</view><view>¥<text class="price">{{Number(orderInfo.order_amount) + Number(orderInfo.coupon_price)}}</text></view></view>
				<view>
					<view>应付金额</view>
					<view>¥<text class="price">{{order_amount}}</text></view>
				</view>
				<view><view>已付金额</view><view>¥<text class="price">{{orderInfo.paid_amount}}</text></view></view>
				<view><view>待付金额</view><view>¥<text class="price">{{orderInfo.unpaid_amount}}</text></view></view>
			</view>
		</view>
		<view class="purchase-info-5">
			<view class="purchase-info-5-top">
				<text @click="copy(orderInfo.order_sn)" class="copy">复制</text>
				<view>订单编号：{{orderInfo.order_sn}}</view>
				<view>下单时间：{{orderInfo.add_time}}</view>
				<view>支付方式：{{orderInfo.pay_type}}</view>
				<view>支付类型：{{orderInfo.settlement_type}}</view>
				<view>送货方式：{{orderInfo.is_install}}</view>
				<view v-if="orderInfo.order_status==0 && orderInfo.shipping_status==0 && orderInfo.pay_status==2">预计发货时间：{{orderInfo.estimate_time}}</view>
			</view>
			<view class="purchase-info-5-bottom" v-if="orderInfo.brief">
				<text>订单备注：</text>
				<text>{{orderInfo.brief}}</text>
			</view>
		</view>
		<view class="purchase-info-6" v-if="orderInfo.order_status!=0&&orderInfo.shipping_status!=0&&orderInfo.pay_status!=0">
			<view>支付方式：{{orderInfo.pay_id==1?'微信支付':'支付宝支付'}}</view>
			<view>支付时间：{{orderInfo.pay_time}}</view>
		</view>
		<view class="purchase-info-7">
			<view class="tit">客户信息</view>
			<text>客户名：{{orderInfo.user_list.nickname}}</text>
			<text>ID：{{orderInfo.user_list.user_id}}</text>
			<text>联系方式：{{orderInfo.user_list.phone}}</text>
		</view>
		<view class="purchase-info-7" v-if="orderInfo.belong_refer_list">
			<view class="tit">销售信息</view>
			<text>销售名：{{orderInfo.belong_refer_list.nickname}}</text>
			<text>ID：{{orderInfo.belong_refer_list.user_id}}</text>
			<text>联系方式：{{orderInfo.belong_refer_list.phone}}</text>
		</view>
		
		<!-- <view class="purchase-info-7" v-if="orderInfo.order_info_express.length">
			<view class="tit">订单跟踪</view>
			<block v-for="(item, index) in orderInfo.order_info_express" :key="index">
				<axis :is-first="index===orderInfo.order_info_express.length" :is-newest="index===0" :is-main-node="item.isMainNode" :node-data="item"></axis>
			</block>
		</view> -->
		<view class="purchase-info-7" v-if="orderInfo.order_info_express.length">
			<view class="tit">订单跟踪</view>
			<view class="time-line" style="padding: 0 20rpx;">
				<u-time-line>
					<!-- <u-time-line-item v-for="(data,index) in orderInfo.order_info_express.slice(0,1)" :key="data.express_id">
						<template v-slot:node>
							<view class="u-node" :class="{active: data.status==1,address: index==0}">
								<text>收</text>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{data.desc}}<text>{{data.phone}}</text></view>
								<view class="u-order-desc">{{data.order_goods_express[0].desc}}</view>
							</view>
						</template>
					</u-time-line-item> -->
					<u-time-line-item v-for="(data,index) in orderInfo.order_info_express" :key="data.express_id">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" :class="{active: data.status==1}">{{data.step}}</view>
						</template>
						<template v-slot:content>
							<view class="line" v-if="data.status==1"></view>
							<view :class="{active: data.status==1}">
								<view class="u-order-title">{{data.desc}}</view>
								<view class="u-order-info" v-for="(item,i) in data.order_goods_express" :key="item.express_goods_id" :class="{active: data.status==1}">
									<view class="u-order-subtitle">{{item.desc}}</view>
									<view class="u-order-time">{{item.add_time}}</view>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<view class="purchase-info-btns" v-if="(orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.pay_status==0 && orderInfo.status_name!=='已取消') || (orderInfo.store_id==store_id && orderInfo.type==2 && orderInfo.pay_status==2 && orderInfo.shipping_status==1 && orderInfo.order_status==0)">
			<!-- <button size="mini" @click="$throttle(pay,2000)" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.pay_status==0" :disabled="isPay" :loading="isPay">{{isPay?'支付中':'立即支付'}}</button> -->
			<button size="mini" @click="confrimGetPro(orderInfo.order_id)" v-if="orderInfo.store_id==store_id && orderInfo.type==2 && orderInfo.pay_status==2 && orderInfo.shipping_status==1 && orderInfo.order_status==0">确认收货</button>
		</view>
		<view class="purchase-info-btns" v-if="(orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.waite_status==1 && orderInfo.pay_status==2 && orderInfo.type==1) || (orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0)">
			<button size="mini" @click="sure(orderInfo.order_id)" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==1 && orderInfo.waite_status==1 && orderInfo.pay_status==2 && orderInfo.type==1">商家确认</button>
			<button size="mini" @click="send(orderInfo.order_id)" v-if="orderInfo.store_id==store_id && orderInfo.goods_store_id==store_id && orderInfo.pay_status==2 && orderInfo.shipping_status==0">去发货</button>
		</view>
		
		<!--选择优惠券-->
		<uni-popup ref="selectCoupon" type="bottom">
			<view class="coupon-pop">
				<view class="coupon-tit">优惠券</view>
				<scroll-view class="coupon-list" scroll-y>
					<view :class="['coupon-item',{gary: coupon_list_id==data.coupon_list_id}]" v-for="(data,index) in couponList" :key="index" @click="choseCoupon(data.coupon_list_id,data.card_name,data.card_type,data.amount,data.discount)">
						<view class="coupon-left">
							<view class="coupon-left-info">
								<view v-if="data.card_type==1">￥{{data.amount}}</view>
								<view v-else>{{data.discount}}折</view>
								<text>{{data.type}}</text>
							</view>
							<image :src="data.icon"></image>
						</view>
						<view class="coupon-center">
							<view>{{data.card_name}}</view>
							<text>{{data.use_explain}}</text>
						</view>
						<view class="coupon-btn"><text>{{coupon_list_id?'已选择':'立即使用'}}</text></view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!--商家确认-->
		<uni-popup ref="selectAddress">
			<view class="selectAddress">
				<view class="selectAddress-tit">请确认送货地址</view>
				<radio-group @change="selectAddress" class="label-group">
					<label class="label"><radio color="#2073F5" value="1" :checked="address_type==1"></radio><text>送货到客户家</text></label>
					<label class="label"><radio color="#2073F5" value="2" :checked="address_type==2"></radio><text>送货到商家仓库</text></label>
				</radio-group>
				<view class="address-info" v-if="address_type==1">
					<view class="consignee"><label class="title">姓名：</label>{{orderInfo.address_id.consignee}}</view>
					<view class="mobile"><label class="title">电话：</label>{{orderInfo.address_id.mobile}}</view>
					<view class="address">
						<label class="title">地址：</label>
						<text v-if="orderInfo.address_id.province">{{orderInfo.address_id.province}}</text>
						<text v-if="orderInfo.address_id.city">{{orderInfo.address_id.city}}</text>
						<text v-if="orderInfo.address_id.district">{{orderInfo.address_id.district}}</text>
						{{orderInfo.address_id.address}}
					</view>
				</view>
				<view class="address-info" v-else>
					<block v-if="orderInfo.store_address_list">
						<view class="consignee"><label class="title">姓名：</label>{{orderInfo.store_address_list.consignee}}</view>
						<view class="mobile"><label class="title">电话：</label>{{orderInfo.store_address_list.mobile}}</view>
						<view class="address">
							<label class="title">地址：</label>
							<text v-if="orderInfo.store_address_list.province">{{orderInfo.store_address_list.province}}</text>
							<text v-if="orderInfo.store_address_list.city">{{orderInfo.store_address_list.city}}</text>
							<text v-if="orderInfo.store_address_list.district">{{orderInfo.store_address_list.district}}</text>
							{{orderInfo.store_address_list.address}}
						</view>
					</block>
					<block v-else>
						<navigator class="navigator" url="/pages/my/address/address-info">没有商家地址，请先添加 <image mode="widthFix" src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></navigator>
					</block>
				</view>
				<view class="selectAddress-btns">
					<view @click="cancel">取消</view>
					<view @click="OrderStoreConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		<!--支付方式-->
		<uni-popup type="bottom" ref="payWay">
			<view class="payWay-box">
				<view class="payWay-tit">请选择支付方式</view>
				<view class="payWay-list">
					<view class="payWay-item" @click="payAgain(2)">
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_alipay.png"></image>
						<view class="pay-name">支付宝</view>
					</view>
					<view class="payWay-item" @click="payAgain(1)">
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_wechat.png"></image>
						<view class="pay-name">微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { handleClipboard } from '../../static/utils/copy.js' 
	export default {
		data() {
			return {
				allchose: false,
				store_id: '',
				order_id: '',
				couponList: [],
				coupon_list_id: '',
				coupon_name: '',
				order_amount: 0,
				address_type: '1',
				orderInfo: {
					address_id: {},
					user_list: {},
					express_img: [],
					belong_refer_list: {},
					order_express_list: [],
					order_info_express: []
				},
				isPay: false
			};
		},
		onLoad(options) {
			this.store_id = JSON.parse(uni.getStorageSync('userInfo')).store_id
			if(options.id){
				this.order_id = options.id
			}
		},
		onShow(){
			this.allchose = false
			this.init(this.order_id)
		},
		methods: {
			init(id){
				this.$api.StockOrderInfo({order_id: id,parameter: 1}).then(res => {
					this.orderInfo = res.datas
					this.order_amount = res.datas.order_amount
					this.orderInfo.goods_list.forEach(item => {
						this.$set(item,'checked',false)
					})
					// this.orderInfo.order_info_express.forEach(item => {
					// 	this.$set(item,'isMainNode',true)
					// })
				}).then(res => {
					if(!this.orderInfo.coupon_id && this.orderInfo.user_list.role_type==2 && this.orderInfo.order_status==0 && this.orderInfo.shipping_status==0 && this.orderInfo.pay_status==0){
						this.$api.SelectCoupon({order_id: id}).then(couponRes => {
							this.couponList = couponRes.datas
						})
					}
				})
			},
			// 支付
			pay(id){
				let _this = this
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '暂不支持移动网页支付，请移步微信小程序或APP支付',
					duration: 2000
				})
				// #endif
				// #ifdef MP-WEIXIN
				if(_this.isPay){
					uni.showToast({
						icon: 'none',
						title: '已提交支付，请勿重复提交',
						duration: 2000
					})
					return false
				}
				_this.isPay = true
				uni.login({
					provider: 'weixin',
					success(loginRes) {
						let data = {
							order_id: _this.orderInfo.order_id,
							pay_id: 1,
							pay_client: 8,
							client_type: 2,
							coupon_list_id: _this.coupon_list_id,
							code: loginRes.code
						}
						_this.$api.againPay(data).then(res => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.datas.timeStamp,
								nonceStr: res.datas.nonceStr,
								package: res.datas.package,
								signType: res.datas.signType,
								paySign: res.datas.paySign,
								success: function (successRes) {
									_this.isPay = false
									uni.showToast({
										icon: 'none',
										title: '支付成功',
										duration: 1500
									})
									setTimeout(() => {
										uni.navigateBack()
									},1500)
								},
								fail: function (err) {
									_this.isPay = false
									let msg = err.errMsg
									if(msg.indexOf('cancel')!=-1){
										uni.showToast({
											icon: 'none',
											title: '取消支付',
											duration: 1500
										})
									}else{
										uni.showToast({
											icon: 'none',
											title: '支付失败',
											duration: 1500
										})
									}
								}
							});
						}).then(() => {
							console.log('aaaa')
						}).catch(() => {
							_this.isPay = false
							uni.showToast({
								icon: 'none',
								title: '支付太频繁，请稍后再试'
							})
						})
					}
				})
				// #endif
				// #ifdef APP-PLUS
				this.$refs.payWay.open()
				// #endif
			},
			// 商家确认订单
			sure(id){
				this.$refs.selectAddress.open()
			},
			selectAddress(e){
				this.address_type = e.detail.value
			},
			cancel(){
				this.$refs.selectAddress.close()
			},
			OrderStoreConfirm(){
				if(!this.address_type){
					uni.showToast({
						icon: 'none',
						title: '请选择送货地址',
						duration: 1500
					})
					return false
				}else if(this.address_type==2 && !this.orderInfo.store_address_list){
					uni.showToast({
						icon: 'none',
						title: '请先添加商家地址',
						duration: 1500
					})
					return false
				}
				this.$api.OrderStoreConfirm({order_id: this.orderInfo.order_id,express_move: this.address_type}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '确认成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack()
					},1500)
				})
			},
			// 发货
			send(id){
				let goods_ids = []
				this.orderInfo.goods_list.forEach(item => {
					if(item.checked){
						goods_ids.push(item.rec_id)
					}
				})
				if(!goods_ids.length){
					uni.showToast({
						icon: 'none',
						title: '请选择发货的商品',
						duration: 1500
					})
				}else{
					uni.navigateTo({
						url: '/pages/order/ship/ship?ids='+goods_ids.join(',') + '&order_id='+this.orderInfo.order_id
					})
				}
			},
			// 确认收货
			confrimGetPro(id){
				uni.showModal({
					title: '温馨提示',
					content: '是否确认已收到货品？',
					confirmText: '确认',
					cancelText: '取消',
					success: (confirm) => {
						if(confirm.confirm){
							this.$api.OrderAffirm({order_id: id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '收货成功',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								},1500)
							})
						}
					}
				})
			},
			// 复制
			copy(e){
				// #ifdef H5
				handleClipboard(e, event, () => {
					uni.showToast({
						icon: 'none',
						title: '复制成功',
						duration: 1500
					})
				}, () => {
					uni.showToast({
						icon: 'none',
						title: '复制失败'
					})
				})
				return false
				// #endif
				uni.setClipboardData({
					data: e,
					success: function () {
						 uni.showToast({
							icon: 'none',
							title: '复制成功',
							duration: 1500
						 })
					}
				});
			},
			cancelPop(){
				this.$refs.popup.close()
			},
			confirmPop(){
				this.$refs.popup.close()
			},
			selectCoupon(){
				if(!this.couponList.length){
					uni.showToast({
						icon: 'none',
						title: '暂无可用优惠券',
						duration: 1500
					})
					return false
				}
				this.$refs.selectCoupon.open()
			},
			choseCoupon(coupon_list_id,card_name,card_type,amount,discount){
				this.$refs.selectCoupon.close()
				if(this.coupon_list_id && this.coupon_list_id==coupon_list_id){
					this.coupon_list_id = ''
					this.coupon_name = ''
					this.order_amount = this.orderInfo.order_amount
					return false
				}
				this.coupon_list_id = coupon_list_id
				this.coupon_name = card_name
				if(card_type==1){
					this.order_amount = this.orderInfo.order_amount - amount
				}else{
					this.order_amount = this.orderInfo.order_amount * discount / 10
				}
			},
			payAgain(type){
				let data = {
					order_id: this.orderInfo.order_id,
					pay_id: type,
					pay_client: 2,
					coupon_list_id: this.coupon_list_id
				}
				this.$api.againPay(data).then(res => {
					if(type==1){
						uni.showModal({
							title: '温馨提示',
							content: '微信支付暂时无法使用，请使用支付宝支付，如需使用微信支付请登录微信小程序支付，感谢您的谅解!',
							confirmText: '知道了',
							showCancel: false
						})
						return false
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.datas.timeStamp,
							nonceStr: res.datas.nonceStr,
							package: res.datas.package,
							signType: 'MD5',
							paySign: res.datas.paySign,
							success: function (successRes) {
								console.log(successRes)
								uni.showToast({
									icon: 'none',
									title: '支付成功',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								},1500)
							},
							fail: function (err) {
								console.log(err)
								let msg = err.errMsg
								if(msg.indexOf('cancel')!=-1){
									uni.showToast({
										icon: 'none',
										title: '取消支付',
										duration: 1500
									})
								}else{
									uni.showToast({
										icon: 'none',
										title: '支付失败',
										duration: 1500
									})
								}
							}
						});
					}else{
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.datas,
							success: (alipaySuccess) => {
								uni.showToast({
									icon: 'none',
									title: '支付成功',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								},1500)
							},
							fail: (alipayFail) => {
								console.log(alipayFail)
								uni.showToast({
									icon: 'none',
									title: '支付已取消',
									duration: 1500
								})
							}
						})
					}
				})
			},
			// 是否全选
			isAll(e){
				if(e.detail.value.length){
					this.orderInfo.goods_list.forEach(item => {
						item.checked = true
					})
				}else{
					this.orderInfo.goods_list.forEach(item => {
						item.checked = false
					})
				}
			},
			// 选择单个判断是否已经全选
			isSingleAll(e){
				if(e.detail.value.length==this.orderInfo.goods_list.length){
					this.allchose = true
				}else{
					this.allchose = false
				}
				let _this = this
				var items = this.orderInfo.goods_list,
						values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.goods_id.toString())){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			lookPic(){
				uni.previewImage({
					current: this.orderInfo.express_img[0],
					urls: this.orderInfo.express_img
				})
			}
		}
	}
</script>

<style lang="scss">
	.purchase-info{
		padding-bottom: 20rpx;
		.u-node {
			width: 47rpx;
			height: 41rpx;
			line-height: 41rpx;
			border-radius: 100rpx;
			background-image: url(https://master.shengejiaju.cn/web/static/icons/order-step.png);
			background-size: cover;
			color: #FFF;
			padding-left: 14rpx;
			background-repeat: no-repeat;
			&.active{
				color: #FFF;
				background-image: url(https://master.shengejiaju.cn/web/static/icons/order-step-hover.png);
				background-size: cover;
			}
			&.address{
				width: 47rpx;
				height: 47rpx;
				padding: 0;
				text-align: center;
				line-height: 47rpx;
			}
		}
		.u-order-title {
			color: #999;
			font-weight: bold;
			font-size: 28rpx;
			margin-top: 10rpx;
			text{
				margin-left: 20rpx;
			}
		}
		
		.u-order-subtitle{
			color: #666;
			// padding-right: 100rpx;
			flex: 1;
			margin-right: 20rpx;
			font-size: 24rpx;
			margin: 10rpx 0;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
		
		.time-line{
			margin-top: 30rpx;
			padding: 40rpx 20rpx 0;
			/deep/ .u-time-axis{
				&::before{
					border-left-width: 8rpx;
					bottom: 0%;
					/* #ifdef MP-WEIXIN */
					bottom: 21%;
					/* #endif */
				}
			}
			/deep/ .u-time-axis-node{
				left: -38rpx;
			}
			/deep/ .u-time-axis-item{
				padding-bottom: 20rpx;
				margin-bottom: 0;
				.line{
					position: absolute;
					content: '';
					width: 4rpx;
					height: 100%;
					left: -22px;
					top: 15rpx;
					background-color: #2073f5;
				}
			}
			/deep/ .u-time-axis-item.active{
				margin-bottom: 0;
				padding-bottom: 30rpx;
			}
		}
		.active{
			.u-order-title{
				color: #141414;
			}
		}
		&.pd0{
			padding-bottom: 120rpx;
		}
		.purchase-info-1{
			height: 200rpx;
			background-color: #2073F5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			color: #FFF;
			.purchase-info-1-tit{
				font-size: 34rpx;
				margin-bottom: 10rpx;
			}
			.purchase-info-1-text{
				font-size: 26rpx;
			}
			image{
				width: 80rpx;
				vertical-align: top;
			}
		}
		.purchase-info-2{
			display: flex;
			align-items: center;
			background-color: #FFF;
			position: relative;
			padding: 50rpx 20rpx 50rpx 0;
			&::after{
				content: '';
				position: absolute;
				height: 1px;
				background-color: #EEE;
				left: 80rpx;
				right: 20rpx;
				bottom: 0;
			}
			image.ico{
				width: 40rpx;
				height: 35rpx;
				margin: 0 20rpx;
			}
			.purchase-info-2-box{
				flex: 1;
				min-width: 0;
				.purchase-info-2-tit{
					font-size: 32rpx;
					color: #2073F5;
				}
				.purchase-info-2-text{
					font-size: 26rpx;
					margin: 10rpx 0;
				}
				.purchase-info-2-time{
					color: #999;
					font-size: 24rpx;
				}
			}
			image.arrow{
				width: 12rpx;
				height: 23rpx;
			}
		}
		.purchase-info-3{
			background-color: #FFF;
			display: flex;
			align-items: center;
			padding: 40rpx 20rpx 40rpx 0;
			image{
				width: 41rpx;
				height: 41rpx;
				margin: 0 20rpx;
			}
			.purchase-info-3-box{
				flex: 1;
				min-width: 0;
				font-size: 28rpx;
				.purchase-info-3-tit{
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					color: #666;
				}
				.purchase-info-3-text{
					font-size: 28rpx;
					color: #666;
					line-height: 46rpx;
				}
			}
		}
		.purchase-info-4{
			background-color: #FFF;
			margin-top: 20rpx;
			padding: 20rpx;
			.chooseAll{
				label{
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: solid 1px #EEE;
					margin-bottom: 20rpx;
				}
			}
			.purchase-info-4-pro{
				margin-bottom: 20rpx;
				label{
					display: flex;
					align-items: center;
				}
				image{
					width: 180rpx;
					height: 180rpx;
					background-color: #EEE;
				}
				.purchase-info-4-info{
					flex: 1;
					min-width: 0;
					margin: 0 20rpx;
					view{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 32rpx;
						margin-bottom: 40rpx;
						&.package{
							white-space: pre-wrap;
						}
					}
					text{
						font-size: 26rpx;
						color: #999;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.purchase-info-4-pro-num{
					font-size: 26rpx;
				}
			}
			.purchase-info-4-coupon{
				display: flex;
				margin-top: 30rpx;
				justify-content: space-between;
				view{
					font-size: 28rpx;
				}
				.coupon-info{
					color: #FF0000;
				}
			}
			.purchase-info-4-cell{
				padding-bottom: 30rpx;
				border-bottom: solid 1px #EEE;
				view{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					font-size: 26rpx;
					color: #999;
				}
				.lookPic{
					margin-left: 20rpx;
					color: red;
				}
			}
			.purchase-info-4-cell-1{
				view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					font-size: 28rpx;
					view{
						margin-top: 0;
					}
					view:last-child{
						color: #FE9B26;
						text{
							font-size: 36rpx;
							display: inline-block;
							margin: -4rpx 0 0 5rpx;
						}
					}
				}
			}
		}
		.purchase-info-5{
			background-color: #FFF;
			padding: 20rpx;
			margin-top: 20rpx;
			.purchase-info-5-top{
				color: #999;
				line-height: 52rpx;
				position: relative;
				view{
					font-size: 26rpx;
				}
				.copy{
					position: absolute;
					right: 0;
					top: 0;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					border: 2rpx solid rgba(32,115,245,1);
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #2073F5;
				}
			}
			.purchase-info-5-bottom{
				font-size: 26rpx;
				display: flex;
				align-items: flex-start;
				line-height: 52rpx;
				border-top: solid 1px #EEE;
				padding-top: 20rpx;
				margin-top: 20rpx;
				text{
					font-size: 26rpx;
				}
				text:last-child{
					flex: 1;
					min-width: 0;
					line-height: 52rpx;
					color: #999;
				}
			}
		}
		.purchase-info-6{
			background-color: #FFF;
			padding: 20rpx;
			margin-top: 20rpx;
			view{
				font-size: 26rpx;
				color: #999;
				line-height: 52rpx;
			}
		}
		.purchase-info-7{
			background-color: #FFF;
			padding: 20rpx;
			margin-top: 20rpx;
			view.tit{
				border-bottom: solid 1px #EEE;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}
			text{
				display: block;
				color: #999;
				line-height: 52rpx;
				font-size: 26rpx;
			}
		}
		.purchase-info-btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 108rpx;
			background-color: #FFF;
			padding: 20rpx;
			text-align: right;
			border-top: solid 1px #EEE;
			button{
				height: 68rpx;
				line-height: 68rpx;
				box-sizing: border-box;
				vertical-align: top;
				margin-left: 20rpx;
				background-color: #FFF;
				color: #666;
			}
		}
		.send-ship{
			background-color: #FFF;
			border-radius: 40rpx;
			width: 550rpx;
			.send-ship-tit{
				text-align: center;
				font-size: 36rpx;
				padding: 45rpx 0 35rpx;
			}
			.send-ship-input{
				margin-top: 20rpx;
				padding: 0 25rpx;
				input{
					height: 78rpx;
					line-height: 78rpx;
					padding: 0 20rpx;
					background-color: #EEE;
				}
			}
			.send-ship-button{
				display: flex;
				border-top: solid 1px #EEE;
				margin-top: 40rpx;
				view{
					flex: 1;
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 34rpx;
					&:first-child{
						color: #999;
						border-right: solid 1px #EEE;
					}
					&:last-child{
						color: #2073F5;
					}
				}
			}
		}
		.coupon-pop{
			background-color: #FFF;
			border-radius: 10rpx 10rpx 0 0;
			padding: 20rpx;
			.coupon-tit{
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
			}
			.coupon-list{
				max-height: 500rpx;
				.coupon-item{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					&.gary{
						filter: grayscale(1);
					}
					.coupon-left{
						width: 160rpx;
						height: 160rpx;
						position: relative;
						image{
						  width: 160rpx;
						  height: 160rpx;
						}
						.coupon-left-info{
						  position: absolute;
						  color: #FFF;
						  text-align: center;
						  top: 50%;
						  left: 50%;
						  transform: translate(-50%,-50%);
							z-index: 1;
							text{
							  font-size: 26rpx;
							}
							view{
							  font-size: 36rpx;
							}
						}
					}
					.coupon-center{
						flex: 1;
						margin: 0 20rpx;
						view{
						  font-size: 32rpx;
						}
						text{
						  font-size: 26rpx;
						  color: #333;
						}
					}
					.coupon-btn text{
					  display: inline-block;
					  color: #FFF;
					  background-image: linear-gradient(to right,rgba(249,76,14,1),rgba(249,126,6,1));
					  border-radius: 20rpx;
					  padding: 10rpx 20rpx;
					  font-size: 20rpx;
					}
				}
			}
		}
		.selectAddress{
			background-color: #FFF;
			padding: 20rpx 20rpx 0;
			border-radius: 10rpx;
			.selectAddress-tit{
				text-align: center;
				margin-bottom: 20rpx;
			}
			.label-group{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
			}
			.label{
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				&:last-child{
					margin-right: 0;
				}
				text{
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
			.address-info{
				padding: 10rpx 0;
				.navigator{
					color: #FF0000;
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					font-size: 28rpx;
					justify-content: space-between;
					image{
						width: 12rpx;
						height: 20rpx;
						vertical-align: middle;
						margin-top: 4rpx;
					}
				}
				view{
					margin-bottom: 10rpx;
					font-size: 24rpx;
					.title{
						color: #666;
					}
				}
			}
			.selectAddress-btns{
				display: flex;
				border-top: solid 1px #EEE;
				margin: 20rpx -20rpx 0;
				view{
					flex: 1;
					text-align: center;
					min-width: 0;
					padding: 20rpx 0;
					&:first-child{
						color: #999;
						border-right: solid 1px #EEE;
					}
					&:last-child{
						color: #2073F5;
					}
				}
			}
		}
		.payWay-box {
			background-color: #FFF;
			padding: 20rpx;
			.payWay-tit{
				text-align: center;
				margin-bottom: 20rpx;
			}
			.payWay-list{
				display: flex;
				align-items: center;
				.payWay-item{
					flex: 1;
					text-align: center;
					image{
						width: 100rpx;
						height: 100rpx;
					}
					view{
						font-size: 30rpx;
						color: #888;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>